<template>
    <div class="userDefined1"> 
        <!-- <el-row class="titleName">
            <el-form ref="form" :model="loadingData" label-width="120px">               
                <el-form-item label="展示类型：">
                    <el-radio label="slide" v-model="loadingData.showType">图片模式</el-radio>
                    <el-radio label="shape" v-model="loadingData.showType">单个组件</el-radio>                      
                </el-form-item>
            </el-form>
        </el-row>            -->
        <div class="main_block">
            <el-row>
                <el-card class="box-card">
                    <el-col :span="24">
                        <el-upload
                        class="upload-demo"
                        ref="upload"
                        action="/dataf"
                        :before-upload="beforeUpload"                        
                        :on-change="onUploadChange"                        
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="loadingSuccess"
                        :before-remove="beforeRemove"
                        :http-request="uploadingPPT"                        
                        multiple
                        :limit="2"                        
                        :file-list="loadingData.fileList"
                        :auto-upload="true"
                        >
                            <el-button class="uploading" type="warning" slot="trigger" size="small">
                                <i class="el-icon-upload el-icon--left"></i>
                                <i class="text">上传PPT<br/> 支持.ppt .pptx</i>
                            </el-button>
                            <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="uploadingPPT">上传到服务器</el-button> :http-request="uploadingPPT" -->
                        </el-upload>
                    </el-col>
                    <div style="text-align:center;width:100%;">
                        <el-col :span="24" v-if="!loadingData.show">
                            <el-progress style="margin-top:10px;"
                            :text-inside="true"
                            :stroke-width="18"
                            status="success"
                            :percentage="percentage"
                            ></el-progress>
                            <p>{{percentage === 100 ? '上传完成！': percentage === 0? '上传失败': '上传中...'}}</p> 
                        </el-col>                       
                        <!-- <span class="mind" v-show="loadingData.show">                                 -->
                            <!-- 让您的PPT完整的展示到我们的智汇互动PPT中，通过“高级编辑”功能，您还能进行自由排版。<br/>
                            避免您在会议或活动过程中从浏览器和PPT来回切换，提升观众体检。 -->
                        <!-- </span> -->
                    </div>
                </el-card>
            </el-row>
        </div>        
    </div>
</template>

<script>
import PPTICON from '../../../../assets/imgs/PPTICON.png';
import PPTSHAPE from '../../../../assets/imgs/PPTSHAPE.png';
    export default {
        name: 'userDefined',   
        props: ["elemShowType"],   
        data() {
            return {  
                loadingData:{
                    fileList: [],
                    show:true                   
                },
                percentage:1                
            }
        },
        created() {
            // console.info(this.loadingData.fileList);
        },            
        methods:{
            // 图片库选择结果
            selectCurrentImg(data) {
                this.pageData.bgImage = data.url;
            },            
            clearBg() {
                this.pageData.bgImage = null;
            }, 
            // 特效库选择结果
            selectCurrentSpx(data) {                
            },
            onUploadChange(file){            
            },             
            uploadingPPT(param){ //上传PPT  
                this.loadingData.show = false;                       
                console.info(this.elemShowType); //fd, param.action,this.$refs.upload,
                if(param.file.name.indexOf(".ppt")!= -1 || param.file.name.indexOf(".pptx")!= -1){
                    this.loadingData.show = false;
                    let member = JSON.parse(sessionStorage.getItem('member'));
                    let fileObj = param.file;                                 
                    let fd = new FormData();// FormData 对象   
                    fd.append("file", fileObj);   
                    fd.append("type", this.elemShowType);  
                    fd.append("token", sessionStorage.getItem('token'));  
                    fd.append("userId", member.userId);  
                    fd.append("sceneId", this.$route.query.sceneId); 
                    this.$api.post(param.action, fd, response => {                      
                        this.$emit('getUploadingData', this.elemShowType);
                    }, fal => {   
                        this.loadingData.show = true;                 
                        this.loadingData.fileList.splice(-1,1);
                        this.$message.error(fal);
                    }, false, true, true, onUploadProgress =>{
                        this.$nextTick(() =>{
                            const complete = Math.round(
                                (onUploadProgress.loaded * 100) / onUploadProgress.total
                            );
                            this.percentage = complete;
                        })
                    });           
                }else{
                    this.loadingData.show = true;
                    this.$message.warning(`上传文件类型仅支持.ppt .pptx`);
                }                             
            },
            handleRemove(file, fileList) { //文件列表移除文件时的钩子
                console.log(file, fileList);
            },
            handlePreview(file) { //点击文件列表中已上传的文件时的钩子
                console.log(file);
            },
            handleExceed(files, fileList) { //文件超出个数限制时的钩子 :on-exceed="handleExceed"
                this.$message.warning(`当前限制选择 2 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) { //删除文件之前的钩子
                return this.$confirm(`确定移除 ${ file.name }？`); //<!--   -->
            },
            loadingSuccess(response, file, fileList){ //上传成功
            },
            // 上传之前
            beforeUpload(file) { 
                console.info(file.type,file.size); 
                if(file.type != "application/vnd.openxmlformats-officedocument.presentationml.presentation" && file.type != "application/vnd.ms-powerpoint"){
                    this.$message.warning(`上传文件类型仅支持.ppt .pptx`);
                    this.loadingData.show = true;
                    this.loadingData.fileList.splice(-1,1);
                }
            }             
        }      
    };
</script>

<style scoped lang="scss">
    .userDefined1{
        // padding-top:20px;
        // .titleName {
        //     margin: 0px 20px 0px;
        //     .title{
        //         line-height: 30px;
        //         font-size: 24px;
        //     }
        //     label{
        //         font-size: 14px;
        //         margin-right: 10px;
        //     }
        // }        
        .main_block{
            width: calc(100% - 40px);
            height: calc(100% - 60px);
            padding:0px 20px 0 20px;
            border-radius: 10px;
            position: relative;
            background-color: #fff;
            margin: 25px auto 0px auto; 
        }
        .reminder{
            font-size: 12px;
            color: #afafaf;
        }
        .uploading{
            margin-top: 10px;
            padding:8px 40px;
        }
        .el-icon-upload{
            font-size: 26px;
            margin-left: -10px;
            width: 35px;
            float: left;
        }
        .text{
            font-style: normal;
            font-size: 16px;
            font-weight: 600;
        }
        .mind{
            margin-top: 20px;
            margin-bottom: 0px;
            font-family: Arial, Helvetica, sans-serif;
            color: rgb(144, 147, 153);
            font-size: 16px;
        }
        .box-card{
            text-align: center;
            padding-bottom: 20px;
            padding-top: 0px;
            margin-bottom: 30px;
        }
    }
</style>